<template>
  <content>
    <template #header>
      <jeesdp-form :fields="model.search" :model="model.params" inline/>
      <div style="display: flex; justify-content: flex-end">
        <el-button-group>
          <el-button>
            查询
          </el-button>
          <el-button>
            重置
          </el-button>
        </el-button-group>
      </div>
    </template>
    <template #tools>
      <el-button
          icon="CirclePlus"
          title="新增"
          @click="model.add"
      />
    </template>
    <template #content>
      <jeesdp-table :data="model.data" :fields="model.columns" :loading="model.loading" :options="model.options"
                    :page="model.page"/>
    </template>
  </content>
  <el-dialog v-model="model.visible" :title="model.title">
    <jeesdp-form ref="form" :data="model.options" :fields="model.fields" :model="model.form" inline/>
    <template #footer>
      <el-button @click="model.save">保存</el-button>
      <el-button @click="model.close">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>

import api from "/@//api/index.js";
import {onMounted, reactive, ref} from "vue";
import {close, confirm, notify, open} from "/@//components/feedback";
import Content from "/@//components/layout/content.vue";

const form = ref();
const model = reactive({
  columns: [{
    prop: 'name',
    label: "名称",
  }, {
    prop: 'label',
    label: "展示名称",
  }, {
    prop: 'type',
    label: "类型",
    formatter: 'translate'
  }, {
    prop: 'length',
    label: "长度",
  }, {
    prop: 'accuracy',
    label: "精度",
  }, {
    prop: 'defaultValue',
    label: "默认值",
    width: 200,
  }, {
    prop: 'updateVaule',
    label: "更新值",
    width: 200,
  }, {
    prop: 'remark',
    label: "备注",
  }, {
    prop: 'autoCreate',
    label: "默认创建",
    formatter: 'switch'
  }, {
    prop: 'isNull',
    label: "为空",
    formatter: 'switch'
  }, {
    type: 'operation',
    label: "操作",
    buttons: [{
      code: 'edit',
      label: '修改',
      icon: 'Edit',
      link: true,
      click: (row) => {
        model.title = '修改';
        api.column.findById(row.id).then((res) => {
          if (res.status === 200) {
            model.form = res.data;
            model.visible = true;
          }
        })
      }
    }, {
      code: 'remove',
      label: '删除',
      icon: 'Delete',
      link: true,
      type: 'danger',
      click: (row) => {
        confirm('确定要删除当前记录?').then(() => {
          api.column.remove(row.id).then((res) => {
            notify(res.message, {type: res.type});
            model.load();
          })
        })
      }
    }, {
      code: 'demo',
      label: '测试',
      icon: 'Delete',
      link: true,
      loading: false,
      type: 'danger',
      click: (row) => {
        model.columns[10].buttons[2].loading = true;
        setTimeout(() => {
          model.columns[10].buttons[2].loading = false;
        }, 2000);
      }
    }]
  },],
  fields: [{
    prop: 'name',
    label: '字段名',
    type: 'input',
    rules: [{required: true, message: '请填写字段名'}],
  }, {
    prop: 'label',
    label: "展示名称",
    type: 'input',
    rules: [{required: true, message: '请填写展示名称'}],
  }, {
    prop: 'type',
    label: '类型',
    type: 'select',
    rules: [{required: true, message: '请填选择类型'}],
  }, {
    prop: 'length',
    label: '长度',
    type: 'number',
    min: 0,
  }, {
    prop: 'accuracy',
    label: '精度',
    type: 'number',
    min: 0,
  }, {
    prop: 'defaultValue',
    label: "默认值",
    type: 'input',
  }, {
    prop: 'updateVaule',
    label: "更新值",
    type: 'input',
  }, {
    prop: 'remark',
    label: "备注",
    type: 'input',
  }, {
    prop: 'autoCreate',
    label: '默认创建',
    type: 'switch',
    rules: [{required: true, message: '请填选择默认创建'}],
  }, {
    prop: 'isNull',
    label: '为空',
    type: 'switch',
    rules: [{required: true, message: '请填选择是否为空'}],
  },],
  search: [{
    prop: 'name',
    label: '字段名',
    type: 'input',
  },],
  options: {
    type: [{
      label: '字符串(varchar)',
      value: 'varchar',
    }, {
      label: '数字(int)',
      value: 'int',
    }, {
      label: '数字{bigint)',
      value: 'bigint',
    }, {
      label: '数字{tinyint)',
      value: 'tinyint',
    }, {
      label: '时间(date)',
      value: 'date',
    }, {
      label: '时间(datatime)',
      value: 'datetime',
    },],
  },
  params: {
    pageNum: 1,
    pageSize: 50,
  },
  page: {
    pageNum: 1,
    pageSize: 50,
    total: 100,
    currentChange: (pageNum) => {
      model.page.pageNum = pageNum;
      model.params.pageNum = pageNum;
      model.load();
    },
    sizeChange: (pageSize) => {
      model.page.pageSize = pageSize;
      model.params.pageSize = pageSize;
      model.load();
    },
  },
  title: '新增',
  data: [],
  form: {},
  visible: false,
  loading: true,
  formDefailtValue: {
    isNull: true,
    autoCreate: false
  },
  load() {
    model.loading = true;
    api.column.page(model.params).then(res => {
      if (res.status === 200) {
        model.data = res.data.list;
        model.page.total = res.data.total;
        model.loading = false;
      }
    })
  },
  add() {
    model.title = '新增';
    model.visible = true;
  },

  save() {
    form.value.validate((err, values) => {
      if (err) {
        open();
        api.column.save(model.form).then((res) => {
          notify(res.message, {type: res.type});
          if (res.status === 200) {
            model.close();
            model.load();
            close();
          }
        })
      }
    })
  },
  close() {
    model.visible = false;
    model.form = model.formDefailtValue;
    form.value.reset();
  }
});

onMounted(() => {
  model.load();
  model.form = model.formDefailtValue;
})

</script>

<style scoped>

</style>
